<template>
  <div class="login-container">
    <el-row>
      <el-col>
        <h3 class="title">每日计费统计系统</h3>
      </el-col>
      <el-col :span="16" :offset="4" class="mb-10">
        <el-input size="medium" placeholder="请输入内容" v-model="loginForm.username">
          <el-button slot="prefix" size="medium" type="text" class="textBtn">
            &nbsp;
            <svg-icon icon-class="user" />
          </el-button>
        </el-input>
      </el-col>
      <el-col :span="16" :offset="4" class="mb-10">
        <el-input size="medium" :type="pwdType" placeholder="请输入内容" v-model="loginForm.password">
          <el-button slot="prefix" size="medium" type="text" class="textBtn">
            &nbsp;
            <svg-icon icon-class="password" />
          </el-button>
          <el-button slot="suffix" size="medium" type="text" class="eye" @click="showPwd">
            &nbsp;
            <svg-icon icon-class="eye" /> &nbsp;
          </el-button>
        </el-input>
      </el-col>
      <el-col :span="16" :offset="4">
        <el-col :span="6" :offset="12">
          <el-button :loading="toSingup" type="primary" @click="singupUsername">注册</el-button>
        </el-col>
        <el-col :span="6" class="tr">
          <el-button :loading="toLogin" type="primary" @click="login">登陆</el-button>
        </el-col>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "admin"
      },
      toLogin: false,
      toSingup: false,
      pwdType: "password",
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    singupUsername() {
      this.toSingup = true;
      this.$store
        .dispatch("Singup", this.loginForm)
        .then(res => {
          this.toSingup = false;
          if (res) {
            this.$router.push({ path: this.redirect || "/" });
          }
        })
        .catch(() => {
          this.toSingup = false;
        });
    },
    login() {
      this.toLogin = true;
      this.$store
        .dispatch("Login", this.loginForm)
        .then(res => {
          this.toLogin = false;
          if (res) {
            this.$router.push({ path: this.redirect || "/" });
          }
        })
        .catch(() => {
          this.toLogin = false;
        });
    },
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #2d3a4b;
$light_gray: #eee;
$dark_gray: #889aa4;

/* reset element-ui css */
.login-container {
  .textBtn {
    color: $dark_gray;
  }
  .eye {
    cursor: pointer;
    color: $dark_gray;
  }
  .el-input {
    input {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 5px;
      color: $light_gray;
      padding-left: 40px;
    }
  }
}
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  .title {
    font-size: 20px;
    font-weight: 400;
    color: $light_gray;
    margin: 50px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
}
</style>


